<!-- 登陆界面 -->
<template>
	<div class="login">
		<!-- 登陆顶部开始 -->
		<div class="login-header">
			<div class="login-header__help">{{ $t('helpCenter') }}</div>
			<!-- 语言中心开始 -->
			<div class="login-header__language">
				<div class="login-header__language_text" @click="showLanguage = !showLanguage">
					{{ langToCn }}
				</div>
				<div class="login-header__language-select" v-show="showLanguage">
					<div class="language-select__text" @click="changeLanguage('cs')">简体中文</div>
					<div class="language-select__text" @click="changeLanguage('ts')">繁体中文</div>
					<div class="language-select__text" @click="changeLanguage('en')">English</div>
				</div>
			</div>
			<!-- 语言中心结束 -->
		</div>
		<!-- 登陆顶部结束 -->
	</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { createNamespacedHelpers } from 'vuex'

const { mapGetters } = createNamespacedHelpers('login')
export default {
	//import引入的组件需要注入到对象中才能使用
	components: {},
	data() {
		// let str = "123"+"456";
		// let str  = `123
		//   456
		// `;
		//这里存放数据
		return {
			showLanguage: false,
		}
	},
	//监听属性 类似于data概念
	computed: {
		// ...mapGetters({
		//   languageText: "langToCn",
		// }),
		...mapGetters(['langToCn']),
	},
	//监控data中的数据变化
	watch: {},
	//方法集合
	methods: {
		changeLanguage: function (lang) {
			//   this.showLanguage = false;
			//   this.languageText = lang;
			//   this.$store.dispatch("login/changeLang", {
			//     lang,
			//   });
			this.showLanguage = false
			// 国际化
			this.$i18n.locale = lang //国际化
			this.$store.commit('login/CHANGE_LANG', {
				lang,
			})
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
.login {
	.login-header {
		height: 1.38889rem;
		padding: 0 0.66667rem;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.login-header__help {
			color: #7f7f7f;
			font-size: 0.38889rem;
			margin-left: 0.75rem;
			cursor: pointer;
			transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
		}

		.login-header__language {
			position: relative;
			margin-left: 0.75rem;
			.login-header__language_text {
				color: #7f7f7f;
				font-size: 0.38889rem;
				cursor: pointer;

				&::after {
					content: '';
					height: 0;
					width: 0;
					border: 0.13889rem solid transparent;
					border-top-color: #7f7f7f;
					margin-left: 0.27778rem;
					margin-bottom: -0.05556rem;
					display: inline-block;
				}
			}
			.login-header__language-select {
				position: absolute;
				background: #fff;
				border-radius: 0.13889rem;
				box-shadow: 0 0 0.13889rem #d3d3d3;
				right: 0;
				top: 0.88889rem;
				width: 3.05556rem;
				z-index: 10;
				.language-select__text {
					height: 1.11111rem;
					padding: 0.13889rem 0.55556rem;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: row;
					white-space: nowrap;
					color: #7f7f7f;
					font-size: 0.38889rem;
					cursor: pointer;
					transition: opacity 0.34s cubic-bezier(0, 0, 0.2, 1) 0s;
				}
			}
		}
	}
}
</style>
